<template>
	<view class="list page">
		
		<view class="filter">
			<view :key="index" :class="{sel:index==idx}" class="item" v-for="(item,idx) in filters" @click="filter(idx)">
				{{item}}
			</view>
			
		</view>
		
		<view class="items">
			<scroll-view style="height: 100%;" class="scroll" scroll-y="true">
			<view class="item" v-for="vo in list" :key="vo.saleOrder.id"  >
				<view class="title">
					<image class="logo" :src="imgH+vo.shop.logo" mode=""></image>
					<view class="shop-info">
						<text class="name">{{vo.shop.name}}</text>
						<text class="time">{{vo.saleOrder.orderTime}}</text>
						<text class="status">{{orderStatusOptions[vo.saleOrder.orderStatus]}}({{paidOptions[vo.saleOrder.paid]}})</text>
					</view>
					
				</view>
				<view class="goods-info">
					<view class="goods">
						<text class="goods-item" v-for="(item,index) in vo.saleOrder.items" :key="index">{{item.name}}{{item.skuName}}X{{item.quantity}}</text>
						<text class="quantity">等{{vo.saleOrder.quantity}}件商品</text>
					</view>
					<view class="price">
						¥{{vo.saleOrder.price}}
					</view>
				</view>
				<view class="btns">
					<view class="btn" @click="toDetail(vo.saleOrder.id)">查看详情</view>
					<view v-if="vo.saleOrder.paid==0&&vo.saleOrder.orderStatus==0" class="btn" @click="repay(vo.saleOrder.id)">继续支付</view>
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {list,info,options,repay} from '@/api/sale_order.js'
	import {showCorrect} from '@/modal/index.js'
	import CONFIG from '@/config/index.js'
	export default {
		components:{
			
		},
		computed:{
				imgH(){
					return CONFIG.IMG_HEAD
				}
		},
		onShow(){
			if(this.$Route.query.paid!='undefined'){
				this.paid = this.$Route.query.paid
			}
			if(this.$Route.query.status!='undefined'){
				this.status = this.$Route.query.status
			}
			if(this.$Route.query.index!='undefined'){
				this.index = this.$Route.query.index
			}
			this.page = 0
			this.list = []
			this.getList()
			this.getOptions()
		},
		onReachBottom(){
			this.page ++
			this.getList()
		},
		onPullDownRefresh(){
			this.page = 0
			this.goodsList = []
			this.getList()
		},
		methods:{
			repay(id){
				repay(id).then(res => {
					let ob = JSON.parse(res.data)
					uni.requestPayment({
						success:()=>{
							this.clearCart()
							showCorrect("支付成功").then(res => {
								this.getList()
							})
						},
						...ob
					})
				})
			},
			getOptions(){
				  options().then(res => {
							this.paidOptions =res.data.paidOptions
							this.orderStatusOptions =res.data.orderStatusOptions
							this.payWayOptions =res.data.payWayOptions
                                    })
			},
			filter(index){
				this.index = index
				if(index ==0){
					this.status = null
					this.paid = null
				}
				if(index == 1){ //未支付
					this.paid = 0
				}
				if(index == 2){ //已支付 未发货
					this.paid = 1
					this.status = 0
				}
				if(index == 3){ //已支付 已发货
					this.paid = 1
					this.status = 2
				}
				//清空数据 重新获取
				this.list = []
				this.page = 0
				this.getList()
			},
			toDetail(id){
			  this.$Router.push({
				  path:"/pages/sale/order/detail",
				  query:{id}
			  })
			},
			getList(){
				list(this.paid,this.status,this.page,this.limit).then(res => {
					this.list = res.data
					// console.log(this.list)
				})
			}
		},
		data() {
			return {
				index:0,
				filters:["全部","未支付","未配送","已配送"],
				page:0,
				limit:10,
				list:[],
				status:null,
				paid:null,
				paidOptions:[],
				orderStatusOptions:[],
				payWayOptions:[]
			};
		}
	}
</script>

<style lang="stylus" scoped>
	::-webkit-scrollbar 
	  width: 0;
	  height: 0;
	  color: transparent;
	.list
		background-color #EFEFEF
		.filter
			background-color #009C4E
			height 88upx
			display flex
			justify-content space-between
			.item
				display flex
				align-items center
				justify-content center
				font-size 28upx
				flex 1
				color white
				&.sel
					color red
		.items
			.item
				margin-bottom 20upx
				background-color white
				.title
					display flex
					align-items center
					.logo
						width 90upx
						height 90upx
						padding 0 21upx
					.shop-info
						flex 1
						display flex
						flex-direction column
						justify-content center
						height 118upx
						border-bottom 1px solid #EFEFEF
						position relative
						.name
							color #000000
							font-size 28upx
							margin-bottom 14upx
						.time
							color #A1A1A1
							font-size 22upx
						.status
							position absolute
							right 20upx
							top 45upx
							color #363535
							font-size 22upx
							margin-right 20upx
				.goods-info
					height 64upx
					color #A1A1A1
					font-size 22upx
					padding-left 135upx
					border-bottom 1px solid #EFEFEF
					display flex
					align-items center
					.goods
						overflow-x scroll
						flex  1
						white-space nowrap
						.goods-item
							margin-right 20upx
					.price
						padding 0 20upx
						color #000000
						font-size 22upx
				.btns
					height 106upx
					display flex
					justify-content  flex-end
					padding-right 18upx
					align-items center
					.btn
						margin-left 20upx
						display flex
						align-items center
						justify-content center
						width:120upx;
						height:46upx;
						border:1px solid rgba(51,92,103,1);
						border-radius:5upx;
						color #335C67
						font-size 20upx
					
					
					
</style>
